<template>
  <div>
    <merge-table
      :table-data="tableData"
      :col-configs="colConfigs"
      :merge-columns="mergeColumns"
      :showSelection="false"
    />
    <el-table
      v-if="false"
      ref="tableFormatData"
      :span-method="mergeRowMethod"
      border
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column label="time" align="center" prop="time" />
      <el-table-column label="grade" align="center" prop="grade" />
      <el-table-column label="name" align="center" prop="name" />
      <el-table-column label="subjects" align="center" prop="subjects" />
    </el-table>
  </div>
</template>

<script>
import MergeTable from '@/components/MergeTable'

export default {
  components: { MergeTable },
  data() {
    return {
      tableData: [],
      mergecell: [
        { Row: 0, Col: 0, RowSpan: 6, ColSpan: 1 },
        { Row: 0, Col: 1, RowSpan: 2, ColSpan: 1 }
        // { Row: 0, Col: 2, RowSpan: 2, ColSpan: 1 },
        // { Row: 2, Col: 1, RowSpan: 1, ColSpan: 3 },
        // { Row: 3, Col: 1, RowSpan: 2, ColSpan: 1 },
        // { Row: 3, Col: 2, RowSpan: 2, ColSpan: 1 },
        // { Row: 5, Col: 1, RowSpan: 1, ColSpan: 3 },
        // { Row: 6, Col: 0, RowSpan: 3, ColSpan: 1 },
        // { Row: 6, Col: 1, RowSpan: 2, ColSpan: 1 },
        // { Row: 6, Col: 2, RowSpan: 2, ColSpan: 1 },
        // { Row: 8, Col: 1, RowSpan: 1, ColSpan: 3 },
      ],
      colConfigs: [
        // {
        //   label: '考试信息',
        //   align: 'center',
        //   type: 'label',
        //   children: [
        //     { prop: 'time', label: '考试时间', align: 'center' },
        //     { prop: 'grade', label: '所在班级', align: 'center' },
        //     { prop: 'name', label: '考生姓名', align: 'center' },
        //     { prop: 'subjects', label: '考试科目', align: 'center' },
        //   ],
        // },
        { prop: 'time', label: '考试时间', align: 'center', type: 'label' },
        { prop: 'grade', label: '所在班级', align: 'center', type: 'label' },
        { prop: 'name', label: '考生姓名', align: 'center', type: 'label' },
        { prop: 'subjects', label: '考试科目', align: 'center', type: 'label' },
        { prop: 'results', label: '考试成绩', align: 'center', type: 'input' },
        { prop: 'remark', label: '备注', align: 'center', type: 'input' }
      ],
      mergeColumns: [
        { index: 0, name: 'time' },
        { index: 1, name: 'grade' },
        { index: 2, name: 'name' },
        { index: 3, name: 'subjects' }
      ]
    }
  },
  created() {},
  mounted() {
    // 获取数据
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 使用Axios调用数据 此处为模拟数据
      this.tableData = [
        { time: '总计', grade: '总计', name: '总计', subjects: '总计' },
        { time: '2020-08-10', grade: '合计', name: '合计', subjects: '合计' },
        { time: '2020-08-10', grade: '年级', name: '姓名', subjects: '课程' },
        { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '语文' },
        { time: '2020-08-10', grade: '三年二班', name: '小明', subjects: '数学' },
        { time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩' },
        { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '语文' },
        { time: '2020-08-10', grade: '三年一班', name: '小雷', subjects: '数学' },
        { time: '2020-08-10', grade: '总成绩', name: '总成绩', subjects: '总成绩' },
        { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '语文' },
        { time: '2020-08-11', grade: '三年三班', name: '小花', subjects: '数学' },
        { time: '2020-08-11', grade: '总成绩', name: '总成绩', subjects: '总成绩' },
      ]
    },
    mergeFunc({ row, rowIndex, column, columnIndex }) {
      this.mergeRowMethod({ row: row, rowIndex: rowIndex, column: column })
      // this.mergeRowMethod({ row: row, columnIndex: columnIndex, column: column })
    },
    mergeRowMethod({ row, rowIndex, column }) {
      console.log(rowIndex)
      const fields = ['time', 'grade', 'name']
      const visibleData = this.tableData
      const _rowIndex = rowIndex
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
    mergeColMethod({ row, rowIndex, column, columnIndex }) {
      console.log(column)
      const fields = ['grade', 'name', 'subjects']
      const visibleData = this.tableData
      const _columnIndex = columnIndex
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_columnIndex - 1]
        let nextRow = visibleData[_columnIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _columnIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: 1, colspan: countRowspan }
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 当前行
      // rowIndex = rowIndex + (this.currentPage - 1) * this.pageSize // 此处是根据当前页码和每页展示的数据，算出当前的实际行数，如果没有做分页的同学，可以忽略此步骤
      // console.log(rowIndex)
      // console.log(columnIndex)

      // 判断有无需要合并的单元格，mergecell 是后端返回的
      if (this.mergecell.length !== 0) {
        // 在此过滤掉不符合条件的单元格格式
        const crow = this.mergecell.filter((val) => {
          return (
            rowIndex >= val.Row &&
            rowIndex < val.Row + val.RowSpan &&
            columnIndex >= val.Col &&
            columnIndex < val.Col + val.ColSpan
          )
          // 此处意思是 判断当前的合并单元格信息，有无包含当前单元格
        })
        console.log('crow', crow)
        if (crow && crow.length !== 0) {
          // 判断是否有符合信息
          if (crow[0].Row === rowIndex && crow[0].Col === columnIndex) {
            // 由于 crow获取的是当前单元格信息包含的单元格，所以要判断一下是否是当前单元格
            // 如果是，则返回单元格格式
            return {
              rowspan: crow[0].RowSpan,
              colspan: crow[0].ColSpan,
            }
          } else {
            // 如果不是，则隐藏当前格子
            return {
              rowspan: 0,
              colspan: 0,
            }
          }
        }
      }
    },
  }
}
</script>

<style></style>
